<template>
    <div>
        <fixed-bar :breadCrumbs="breadCrumbs"></fixed-bar>
        <div class="tool-box">
            <div class="tool-box-left">

                <div class="fbutton">
                    <div class="add" title="添加学员帐号密码">
                        <span @click="addStp1">添加学员+帐号密码</span>
                    </div>
                </div>

                <div class="fbutton">
                    <div class="add" title="更新查看最新状态">
                        <span>更新查看最新状态</span>
                    </div>
                </div>


            </div>
            <div class="tool-box-right">

                <select class="select">
                    <option value="">所有分类</option>
                </select>
                <select class="select">
                    <option value="">所有品牌</option>
                </select>
                <select class="select">
                    <option value="">全部</option>
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                </select>
                <select class="select">
                    <option value="0">全部</option>
                    <option value="is_new">新品</option>
                    <option value="is_recommend">推荐</option>
                </select>
                <input type="button" class="btn" value="搜索">

            </div>
        </div>
        <div class="table-box">
            <table id="addStudentsTable"></table>
        </div>
    </div>
</template>

<script>
  import addStpHtml from './addStudents';

  let breadCrumbs = {
    title: {
      h3: "添加学员",
      h5: "添加需要做作业的学生帐号密码",
      childrenBar: []
    },
    prompt: [

      "跨期人数：当前添加的名单,能做的,跨越2个学期,",
      "所属院校,当次添加的人数" + ",,院校种类,当次添加的有几个院校",
      "未识别,当次添加有几个学生没识别出院校的",
    ]
  };
  let openTion = {
    type: 1 //Page层类型
    , area: ['40%', 'auto']
    , shade: 0.6 //遮罩透明度
    , anim: 5 //0-6的动画形式，-1不开启
    , shadeClose: false   //是否点击遮罩关闭
    , closeBtn: 0  //关闭按钮
  };

  export default {
    data() {
      return {
        breadCrumbs,
        openIndex1: "",
        openIndex2: "",
        openIndex3: "",
        openIndex4: "",
        money: 0,
      }
    },
    beforeCreate() {

    },

    methods: {
      addStp1() {
        this.openIndex1 = layer.open({
          ...openTion
          , title: '添加学员 1/4'
          , content: addStpHtml.stp1
        });
      },
      addStp2() {
        this.openIndex2 = layer.open({
          ...openTion
          , title: '添加学员 2/4'
          , content: addStpHtml.stp2
        });
      },
      addStp3() {

        this.openIndex3 = layer.open({
          ...openTion
          , area: ['480px', 'auto']
          , title: '扣费提醒'
          , content: addStpHtml.prompt
        });

      },


    },
    mounted() {

      this.$nextTick(res => {

        layui.use('table', function () {
          var table = layui.table;

          table.render({
            elem: '#addStudentsTable',
            page: true,
            cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[{ type: 'checkbox' },
              { field: 'addNumber', title: '添加次数' },
              { field: 'addDate', title: '添加日期', sort: true },
              { field: 'addStudentsNumber', title: '添加人数', sort: true },
              { field: 'interTemporalNumber', title: '跨期人数', sort: true },
              { field: 'pastRepeat', title: '(与)往期重复', sort: true },
              { field: 'schoolNumber', title: '所属院校', sort: true },//如果是一所就列出来,如果多所就写数目
              { field: 'schoolIdentify', title: '(院校)未识别', sort: true }, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
              { field: 'detailed', title: '列表清单' },
            ]],
            data: [
              { "id": "10002" }
            ]
          });
        });


        // 第一步的 点击取消
        $(document).on('click', '#linkCancel', e => {
          layer.close(this.openIndex1);
        });

        // 第一步的 点击确定
        $(document).on('click', '#linkOk', e => {
          layer.min(this.openIndex1);
          this.addStp2();
        });

        $(document).on('click', '#linkCancel2', e => {
          layer.close(this.openIndex2);
          layer.restore(this.openIndex1);
        });

        $(document).on('click', '#linkOk2', e => {
          this.addStp3();
        });

        $(document).on('click', '#linkCancel3', e => {
          layer.close(this.openIndex3);
        });

        $(document).on('click', '#linkOk3', e => {
          let statusIndex=1;//余额是否够扣费的 1 够  ; 0 不够

          if(statusIndex){

          }else {


          }

        });


      })
    }

  }
</script>

<style lang="scss">
    @import "../../scss/toolbox";

    .translateio {
        padding: 20px;
        width: 60%;
        margin: auto;
        p {
            margin-top: 10px;
        }
        span {
            color: red;
            font-weight: 600;
        }
    }

    .textarea {
        font-size: 16px;
        margin-top: 10px;
        padding: 10px;
        resize: none;
        outline: 0;
        z-index: 3;
        color: #333;
        width: 96%;
        line-height: 23px;
        height: 250px;
    }

    .pop-link-btns {
        padding-top: 20px;
        text-align: center;
    }

    .pop-link-btns > a {
        display: inline-block;
        width: 98px;
        margin: 0 18px;
        line-height: 34px;
        color: #1aa6ff;
        border: 1px solid #1aa6ff;
        font-size: 16px;
        border-radius: 3px;
    }

    .pop-link-btns > a:last-child {
        background-color: #1aa6ff;
        color: #fff;
    }


</style>
